<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Toggle - Sizes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Toggle - Sizes</ion-title>
        <ion-buttons slot="end">
          <ion-button onClick="toggleDynamic()">Toggle</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding-horizontal">
      <h1>Default</h1>
      <ion-toggle aria-label="Default"></ion-toggle>
      <ion-toggle aria-label="Default" checked></ion-toggle>
      <ion-toggle aria-label="Default Danger" color="danger"></ion-toggle>
      <ion-toggle aria-label="Default Danger" color="danger" checked></ion-toggle>
      <ion-toggle aria-label="Default Tertiary" color="tertiary" class="toggle-activated"></ion-toggle>
      <ion-toggle aria-label="Default Tertiary Activated" color="tertiary" checked class="toggle-activated"></ion-toggle>

      <h1>Custom Widths</h1>
      <ion-toggle aria-label="Secondary Small Width" color="secondary" class="width-small"></ion-toggle>
      <ion-toggle aria-label="Secondary Small Width" color="secondary" checked class="width-small"></ion-toggle>
      <ion-toggle aria-label="Secondary Large Width" color="secondary" class="width-large"></ion-toggle>
      <ion-toggle aria-label="Secondary Large Width" color="secondary" checked class="width-large"></ion-toggle>
      <ion-toggle aria-label="Tertiary Large Width Activated" color="tertiary" class="width-large toggle-activated"></ion-toggle>
      <ion-toggle aria-label="Tertiary Large Width Activated" color="tertiary" checked class="width-large toggle-activated"></ion-toggle>

      <h1>Custom Heights</h1>
      <div style="display: flex; flex-flow: column; float: left;">
        <ion-toggle aria-label="Small Height" class="height-small"></ion-toggle>
        <ion-toggle aria-label="Small Height" checked class="height-small"></ion-toggle>
      </div>
      <ion-toggle aria-label="Large Height" class="height-large"></ion-toggle>
      <ion-toggle aria-label="Large Height" checked class="height-large"></ion-toggle>
      <ion-toggle aria-label="Large Height" class="handle-height-large"></ion-toggle>
      <ion-toggle aria-label="Large Height" checked class="handle-height-large"></ion-toggle>
      <ion-toggle aria-label="Large Height Activated" checked class="handle-height-large toggle-activated"></ion-toggle>

      <h1>Dynamic Sizes</h1>
      <ion-toggle aria-label="Tertiary Small Width Small Height" color="tertiary" class="dynamic-small width-small height-small"></ion-toggle>
      <ion-toggle aria-label="Tertiary Small Width Small Height" color="tertiary" checked class="dynamic-small width-small height-small"></ion-toggle>
      <ion-toggle aria-label="Tertiary Large Width Large Height" color="tertiary" class="dynamic-large width-large height-large"></ion-toggle>
      <ion-toggle aria-label="Tertiary Large Width Large Height" color="tertiary" checked class="dynamic-large width-large height-large"></ion-toggle>

      <h1>Complex Custom Toggles</h1>
      <ion-toggle aria-label="Custom" mode="ios" class="all-custom"></ion-toggle>
      <ion-toggle aria-label="Custom" mode="ios" checked class="all-custom"></ion-toggle>

      <ion-toggle aria-label="Custom Overflow" class="custom-overflow"></ion-toggle>
      <ion-toggle aria-label="Custom Overflow" checked class="custom-overflow"></ion-toggle>

      <ion-toggle aria-label="Custom Spacing iOS" mode="ios" color="dark" class="custom-spacing"></ion-toggle>
      <ion-toggle aria-label="Custom Spacing iOS" mode="ios" color="dark" checked class="custom-spacing"></ion-toggle>

      <ion-toggle aria-label="Custom Spacing MD" mode="md" color="dark" class="custom-spacing"></ion-toggle>
      <ion-toggle aria-label="Custom Spacing MD" mode="md" color="dark" checked class="custom-spacing"></ion-toggle>

      <ion-toggle aria-label="Custom Icon iOS" mode="ios" class="icon-custom"></ion-toggle>
      <ion-toggle aria-label="Custom Icon iOS" mode="ios" checked class="icon-custom"></ion-toggle>
    </ion-content>
  </ion-app>

  <style>
    ion-toggle {
      padding: 5px;
    }

    .width-small {
      width: 40px;
    }

    .width-large {
      width: 100px;
    }

    .ios.height-small {
      height: 20px;

      /* The height of the handle is 100% of the track height - 4px */
      --handle-width: 16px;
    }

    .md.height-small {
      height: 10px;

      /* The height of the handle is 100% of the track height + 6px */
      --handle-width: 16px;
    }

    .height-large {
      height: 60px;

      --border-radius: 4px;
      --handle-border-radius: 4px;

      --handle-width: 50%
    }

    .handle-height-large {
      height: 60px;

      /*
       * The max height of the handle is 100% of the track height - handle spacing
       * so this will never show as being 150%
       */
      --handle-height: 150%;
      --handle-width: 23px;
      --handle-border-radius: 14px 4px 4px 14px;
      --handle-transition: border-radius 120ms ease-in-out 80ms;
    }

    .handle-height-large.toggle-checked {
      --handle-border-radius: 4px 14px 14px 4px;
    }

    .icon-custom {
      --handle-background-checked: #fff url(/src/components/toggle/test/sizes/power-outline.svg) no-repeat center / contain;
    }

    .icon-custom::before {
      position: absolute;
      content: "ON";
      color: white;
      top: 16px;
      left: 10px;
      z-index: 1;
      font-size: 8px;
    }

    .all-custom {
      height: 20px;
      width: 40px;

      --background: #fff;
      --background-checked: #0366a6;
      --handle-background: #bbbbbb;
      --handle-width: 20px;
      --handle-height: 20px;
      --handle-spacing: 0;
      --handle-box-shadow: none;

      border: 2px solid #bbb;
      border-radius: 16px;
    }

    .all-custom.toggle-checked {
      border-color: #0366a6;

      --handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
    }

    .custom-overflow {
      overflow: visible;

      contain: none;

      --background-checked: #d6ffd6;

      --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
    }

    .ios.custom-spacing {
      --handle-height: 100%;
      --handle-width: 32px;

      --handle-spacing: 0;
    }

    .md.custom-spacing {
      --handle-height: 100%;
      --handle-width: 14px;

      --handle-spacing: 0;
    }
  </style>

  <script>
    const smallToggles = document.querySelectorAll('.dynamic-small');
    const largeToggles = document.querySelectorAll('.dynamic-large');

    function toggleDynamic() {
      for (var i = 0; i < smallToggles.length; i++) {
        const toggle = smallToggles[i];

        const hasClass = toggle.classList.contains('height-small');

        if (hasClass) {
          toggle.classList.remove('height-small');
          toggle.classList.remove('width-small');
        } else {
          toggle.classList.add('height-small');
          toggle.classList.add('width-small');
        }
      }

      for (var i = 0; i < largeToggles.length; i++) {
        const toggle = largeToggles[i];

        const hasClass = toggle.classList.contains('height-large');

        if (hasClass) {
          toggle.classList.remove('height-large');
          toggle.classList.remove('width-large');
        } else {
          toggle.classList.add('height-large');
          toggle.classList.add('width-large');
        }
      }
    }
  </script>
</body>

</html>
